<template>
  <div class="table-box">
    <ProTable
      ref="proTableBox"
      :columns="dataGrid.columns"
      :request-api="roleFindList"
      :pagination="false"
      :data-callback="tableDataCallback"
    >
      <template #tableHeader>
        <GlobalButton :button-list="dataGrid.headButtonList"></GlobalButton>
      </template>

      <template #operation="{ row }">
        <GlobalButton :button-list="dataGrid.rowButtonList" :row-params="row"></GlobalButton>
      </template>
    </ProTable>

    <!-- 角色编辑新增 -->
    <DialogForm
      :options="addForm.options"
      :title="addForm.title"
      :width="addForm.width"
      :form-cols="addForm.formCols"
      :form-attrs="addForm.formAttrs"
      v-model:visible="addForm.visible"
      @get-model="(form: RoleInterface.ReqSave) => (addForm.form = form)"
      @submit-form="saveAddForm"
    ></DialogForm>

    <!-- 权限菜单 -->
    <Perm v-model:visible="permissionMenu.visible" :role-id="permissionMenu.roleId"></Perm>
  </div>
</template>

<script setup lang="ts">
import Perm from './components/opPerm.vue';

import { ProTableInstance } from '@/components/ProTable/interface';

import { roleFindList } from '@/api/modules/auth/role';

import { useDataGrid } from './hooks/use-dataGrid';
import { RoleInterface } from '@/api/interface/auth/role';

const proTableBox = ref<ProTableInstance>();

const { dataGrid, permissionMenu, tableDataCallback, saveAddForm, addForm } = useDataGrid(proTableBox);
</script>
